<template id="confrim">
  <div class="ui-modal" role="dialog" v-el:modal :class="{'wide-modal': isWide}">
     <div>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
<!--            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
            <h4 class="modal-title">{{title}}</h4>
          </div>
          <div class="modal-body">
          	<slot></slot>
          </div>
          <div class="modal-footer">           
 						<v-button theme="primary" class="pull-left" @click="resolve">{{hint}}</v-button>
            <v-button @click="reject">取消</v-button>
          </div>
        </div><!-- /.modal-content -->
      </div> 
		 </div>    
  </div>   
</template>
<style scoped>
.wide-modal .modal-dialog {
	width: 80% !important;
	min-width: 600px;
	max-width: 1200px;
}
</style>
<script>
  export default {  
    replace: false,      
		props: {
			title: {
				type: String,
				default:""
			},
			content: {
				type: String,
				default:""	
			},
			isWide: {
				type: Boolean,
				default: false
			},
			hint: {
				type: String,
				default: "确认"
			}			
		},	
    methods: {
			  init() {
					$(this.$els.modal).modal('show'); 
				},			
				hide() {
					$(this.$els.modal).modal('hide'); 
				},			
        resolve() {
						this.$dispatch("resolve");
        },
        reject() {            
						this.$dispatch("reject");
        }
    },
		ready() {
				$(this.$els.modal).on('shown.bs.modal', function () {	
  				$(this).find(".modal-footer").first().find('button:visible:first').focus();
				})
		}		
  }
</script>